<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加用户　User Form</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/statics/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/style/admin.css}" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin"
     style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                   class="layui-input" th:value="${user.userName}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickname" placeholder="请输入昵称" autocomplete="off"
                   class="layui-input" th:value="${user.nickName}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
            <input type="text" name="mobile" lay-verify="phone" placeholder="请输入号码" autocomplete="off"
                   class="layui-input" th:value="${user.mobile}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off"
                   class="layui-input" th:value="${user.email}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline">
            <input type="text" name="avatar" lay-verify="required" placeholder="请上传图片" autocomplete="off"
                   class="layui-input" th:value="${user.avatar}"/>
        </div>
        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-useradmin">上传图片</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off"
                   class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input type="text" name="confirm_password" lay-verify="pass" placeholder="请输入密码" autocomplete="off"
                   class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block" style="width: 193px;">
            <select name="role_id" lay-verify="" id="layui-form-role-id">
                <option th:each="r:${roles}" th:value="${r.id}" th:text="${r.name}"
                        th:selected="${r.id == user.roleId}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <label><input type="radio" name="state" value="1" title="正常" th:field="${user.state}"/></label>
            <label><input type="radio" name="state" value="9" title="锁定" th:field="${user.state}"/></label>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input name="id" type="hidden" th:value="${user.id}"/>
        <input type="button" lay-submit lay-filter="LAY-user-add-submit" id="LAY-user-add-submit" value="确认"/>
    </div>
</div>

<script th:src="@{/statics/layui/layui.js}"></script>
<script th:inline="none">
    layui.config({
        base: '/statics/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload;

        upload.render({
            elem: '#layuiadmin-upload-useradmin'
            , url: '/api/file/local/upload'
            , accept: 'images'
            , method: 'post'
            , acceptMime: 'image/*'
            , done: function (res) {
                $(this.item).prev("div").children("input").val(res.data)
            }
        });
    })

</script>
</body>
</html>